<template>
  <div id="app">
    <!-- layout 布局 -->
    <!-- el-row  行  -->
    <!-- el-col  列 -->
    <h1>layout布局</h1>
    <!-- 基础布局 -->
    <h2>基础布局</h2>
    <el-row class="wrap">
      <el-col :span='8'>
        <div class="bg-red"></div>
      </el-col>
      <el-col :span='8'>
        <div class="bg-green"></div>
      </el-col>
      <el-col :span='8'>
        <div class="bg-yellow"></div>
      </el-col>
    </el-row>
    <!-- 分栏间隔 gutter -->
    <h2>分栏间隔</h2>
    <el-row class="wrap" :gutter='40'>
      <el-col :span='6'>
        <div class="bg-red"></div>
      </el-col>
      <el-col :span='6'>
        <div class="bg-green"></div>
      </el-col>
      <el-col :span='6'>
        <div class="bg-yellow"></div>
      </el-col>
      <el-col :span='6'>
        <div class="bg-green"></div>
      </el-col>

    </el-row>
    <!-- type='flex -->
    <h2>对齐方式</h2>
    <el-row class="wrap" type='flex' justify='center'>
      <el-col :span='6'>
        <div class="bg-red"></div>
      </el-col>
      <el-col :span='6'>
        <div class="bg-green"></div>
      </el-col>
      <el-col :span='6'>
        <div class="bg-yellow"></div>
      </el-col>
    </el-row>
    <h2>偏移</h2>
    <el-row class="wrap">
      <el-col :span='12' :offset='6'>
        <div class="bg-red"></div>
      </el-col>
      <el-col :span='6'>
        <div class="bg-green"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
    
  }
}
</script>

<style>
*{
  margin:0;
  padding: 0;
}
.wrap{
    width: 100%;
    height: 50px;
    
  }
  .bg-red{
    background: red;
    height: 40px;
  }
  .bg-green{
    background: green;
    height: 40px;
  }
  .bg-yellow{
    background: yellow;
    height: 40px;
  }
</style>
